<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <el-container>
  <el-header id="header">Header</el-header>
  <el-container>
    <el-aside width="300px" id="aside">
      <ul class="list">
        <li>
          <router-link to="/" style="text-decoration:none;">首页</router-link>
        </li>
        <li>
          <router-link to="/user">用户管理</router-link>
        </li>
        <li>
          <router-link to="/lists">列表</router-link>
        </li>
      </ul>
      </el-aside>
    <el-main>
      <!--组件文件展示视图 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
  #header{
    background:rgba(26, 94, 110, 0.5);
    border-radius:6px;
  }
  #aside{
    background:rgba(169, 194, 199, 0.5);
    border-radius:6px;
  }
  .list{
    margin-top:50px;
    list-style:none;
    margin-bottom:5px;
  }
  .list li{
    margin-bottom:10px;
  }
  a{
    text-decoration:none;
    color:black;
  }
  a:hover{
    color:rebeccapurple;
  }
</style>
